<script>{
		"title":
			"Size Effect",
		"excerpt":
			"Resize an element to a specified width and height.",
		"termSlugs": {
			"category": [
				"effects"
			]
		}
	}</script>
<article id="size1" class="entry effect">
	<h2 class="section-title">
		<span>Size Effect</span>
	</h2>
	<div class="entry-wrapper">
		<p class="desc">
			<strong>Description: </strong>Resize an element to a specified width
			and height.
		</p>
		<ul class="signatures">
			<li class="signature">
				<h4 class="name">size</h4>
				<ul>
					<li>
						<div>
							<strong>to</strong>
						</div>
						<div>
							Type: <a href="http://api.jquery.com/Types#Object">Object</a>
						</div>
						<div>Height and width to resize to.</div>
					</li>
					<li>
						<div>
							<strong>origin</strong> (default:
							<code>[ "top", "left" ]</code>
							)
						</div>
						<div>
							Type: <a href="http://api.jquery.com/Types#Array">Array</a>
						</div>
						<div>The vanishing point.</div>
					</li>
					<li>
						<div>
							<strong>scale</strong> (default:
							<code>"both"</code>
							)
						</div>
						<div>
							Type: <a href="http://api.jquery.com/Types#String">String</a>
						</div>
						<div>
							Which areas of the element will be resized:
							<code>"both"</code>
							,
							<code>"box"</code>
							,
							<code>"content"</code>
							. Box resizes the border and padding of the element; content
							resizes any content inside of the element.
						</div>
					</li>
				</ul>
			</li>
		</ul>
		<section class="entry-examples" id="entry-examples">
			<header>
				<h2 class="underline">Example:</h2>
			</header>
			<div class="entry-example" id="example-0">
				<h4>
					<span class="desc">Resize the element using the size effect.</span>
				</h4>
				<div class="syntaxhighlighter xml ">
					<table>
						<tbody>
							<tr>
								<td class="gutter">

									<div class="line n1">1</div>

									<div class="line n2">2</div>

									<div class="line n3">3</div>

									<div class="line n4">4</div>

									<div class="line n5">5</div>

									<div class="line n6">6</div>

									<div class="line n7">7</div>

									<div class="line n8">8</div>

									<div class="line n9">9</div>

									<div class="line n10">10</div>

									<div class="line n11">11</div>

									<div class="line n12">12</div>

									<div class="line n13">13</div>

									<div class="line n14">14</div>

									<div class="line n15">15</div>

									<div class="line n16">16</div>

									<div class="line n17">17</div>

									<div class="line n18">18</div>

									<div class="line n19">19</div>

									<div class="line n20">20</div>

									<div class="line n21">21</div>

									<div class="line n22">22</div>

									<div class="line n23">23</div>

									<div class="line n24">24</div>

									<div class="line n25">25</div>

									<div class="line n26">26</div>

									<div class="line n27">27</div>

									<div class="line n28">28</div>

									<div class="line n29">29</div>

									<div class="line n30">30</div>

									<div class="line n31">31</div>

								</td>
								<td class="code"><pre>
										<div class="container">
											<div class="line">
												<code>
													<span class="doctype">&lt;!doctype html&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>
													<span class="tag">&lt;<span class="title">html</span> <span
														class="attribute">lang</span>=<span class="value">"en"</span>&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>
													<span class="tag">&lt;<span class="title">head</span>&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>  <span class="tag">&lt;<span
														class="title">meta</span> <span class="attribute">charset</span>=<span
														class="value">"utf-8"</span>&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>  <span class="tag">&lt;<span
														class="title">title</span>&gt;</span>size demo<span class="tag">&lt;/<span
														class="title">title</span>&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>  <span class="tag">&lt;<span
														class="title">link</span> <span class="attribute">rel</span>=<span
														class="value">"stylesheet"</span> <span class="attribute">href</span>=<span
														class="value">"http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"</span>&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>  <span class="tag">&lt;<span
														class="title">style</span>&gt;</span><span class="css"></span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>  <span class="id">#toggle</span> <span
														class="rules">{</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>    <span class="rule"><span
														class="attribute">width</span>:<span class="value"> <span
															class="number">100</span>px;</span></span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>    <span class="rule"><span
														class="attribute">height</span>:<span class="value"> <span
															class="number">100</span>px;</span></span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>    <span class="rule"><span
														class="attribute">background</span>:<span class="value"> <span
															class="hexcolor">#ccc</span>;</span></span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>  <span class="rule">}</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>  <span class="tag">&lt;/<span
														class="title">style</span>&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>  <span class="tag">&lt;<span
														class="title">script</span> <span class="attribute">src</span>=<span
														class="value">"http://code.jquery.com/jquery-1.8.3.js"</span>&gt;</span><span
														class="javascript"></span><span class="tag">&lt;/<span
														class="title">script</span>&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>  <span class="tag">&lt;<span
														class="title">script</span> <span class="attribute">src</span>=<span
														class="value">"http://code.jquery.com/ui/1.9.2/jquery-ui.js"</span>&gt;</span><span
														class="javascript"></span><span class="tag">&lt;/<span
														class="title">script</span>&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>
													<span class="tag">&lt;/<span class="title">head</span>&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>
													<span class="tag">&lt;<span class="title">body</span>&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code> </code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>
													<span class="tag">&lt;<span class="title">p</span>&gt;</span>Click anywhere to resize the box.<span
														class="tag">&lt;/<span class="title">p</span>&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>
													<span class="tag">&lt;<span class="title">div</span> <span
														class="attribute">id</span>=<span class="value">"toggle"</span>&gt;</span><span
														class="tag">&lt;/<span class="title">div</span>&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code> </code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>
													<span class="tag">&lt;<span class="title">script</span>&gt;</span><span
														class="javascript"></span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>$( document ).click(<span class="keyword">function</span>() {</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>  $( <span class="string">"#toggle"</span> ).effect( <span
														class="string">"size"</span>, {</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>    to: { width: <span class="number">200</span>, height: <span
														class="number">60</span> }</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>  }, <span class="number">1000</span> );</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>});</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>
													<span class="tag">&lt;/<span class="title">script</span>&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code> </code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>
													<span class="tag">&lt;/<span class="title">body</span>&gt;</span>
												</code>
											</div>
										</div>
										<div class="container">
											<div class="line">
												<code>
													<span class="tag">&lt;/<span class="title">html</span>&gt;</span>
												</code>
											</div>
										</div>
									</pre></td>
							</tr>
						</tbody>
					</table>
				</div>

				<h4>Demo:</h4>
				<div class="demo code-demo" data-height="200"></div>
			</div>
		</section>
	</div>
</article>